<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>评价</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="./css/ionic-change.css">
    <link rel="stylesheet" href="./css/order.css">
    <!-- <link rel="stylesheet" href="./css/weui.css"> -->
    <!-- <link rel="stylesheet" href="./js/tc/weui2.css"> -->
    <!--弹框-->
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/tc/zepto.min.js"></script>
  </head>
  <style>
    .pjtwo1>span {
      margin-bottom: 0.8rem;
    }
    .weui-toast {
      position: fixed;
      z-index: 5000;
      padding: 0.8rem;
      /* width: 7.6em; */
      min-height: 2.8em;
      top: 180px;
      left: 20%;
      right:20%;
      margin: auto;
      background: rgba(17, 17, 17, 0.7);
      text-align: center;
      border-radius: 5px;
      color: #FFFFFF;
  }
    .pjtwobox1 {
      height: auto;
    }
  </style>

  <body style="background-color: #ffffff;">
    <div class="page-hd">
      <!--★-->
      <div class="weui-rater">
        <a data-num="0" class="weui-rater-box nav"> <span class="weui-rater-inner"> </a>
        <a data-num="1" class="weui-rater-box nav"> <span class="weui-rater-inner"> </a>
        <a data-num="2" class="weui-rater-box"> <span class="weui-rater-inner"> </a>
        <a data-num="3" class="weui-rater-box"> <span class="weui-rater-inner"> </a>
        <a data-num="4" class="weui-rater-box"> <span class="weui-rater-inner"> </a>
      </div>
      <div id='fen' class="weui_cells_title">请对本次租车做出评价</div>
    </div>
    <!--3到5星评价-->
    <div class="pjtwobox1">
      <div class="pjtwo1">
        <span>车内整洁</span>
        <span>服务态度棒</span>
        <span>驾驶平稳</span>
        <span>活地图认路准</span>
        <span>驾驶平稳</span>
        <span>驾驶平稳</span>
        <span>车内整洁</span>
        <span>服务态度棒</span>
        <span>驾驶平稳</span>
        <span>驾驶平稳</span>
        <span>驾驶平稳</span>
        <span>驾驶平稳</span>
      </div>
    </div>
    <!--1到2星评价-->
    <div class="pjtwobox2">
      <div class="pjtwo1">
        <span>车内有异味</span>
        <span>环境比较嘈杂</span>
        <span>座椅不舒服</span>
        <span>其他，请补充</span>
      </div>
    </div>
    <!--其它评价-->
    <div class="pjqtbox">
      <div>其它评价</div>
      <textarea placeholder="可以补充其他评价给我们，我们会为您提供更好的服务"></textarea>
    </div>
    <div class="pjfooter">提交</div>
    <div id="toast1" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <p class="weui-toast__content">请对本次租车做出评价</p>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      //			点击提交
      $(".pjfooter").click(function () {
        if (!($(".weui-rater-box").hasClass("checked"))) {
          $("#toast1").show();
          setTimeout(function () {
            $("#toast1").hide()
          }, 1500);
        } else {
          window.open("Order_pjsuccess.html");
        }
      })

      //			切换星级显示
      $('.weui-rater-box').click(function () {

        if ($(this).hasClass('nav')) {
          $(".pjtwobox2").show();
          $(".pjtwobox1").hide();
        } else {
          $(".pjtwobox2").hide();
          $(".pjtwobox1").show();
        }
      })

      $('.weui-number-plus').click(function () {
        upDownOperation($(this));
      });
      $('.weui-number-sub').click(function () {
        upDownOperation($(this));
      });
      //评分js
      var arr = ["很不满意，有待提升", "不满意，有待提升", "一般，继续加油", "比较满意，支持支持", "非常满意，无可挑剔"];
      var num = -1;
      $(".weui-rater a").mouseover(function () {
        var thisL = $(this).index();
        for (var i = 0; i < thisL; i++) {
          $(".weui-rater a").eq(i).addClass('checked');
        }
        for (var i = thisL; i < 5; i++) {
          $(".weui-rater a").eq(i).removeClass('checked');
        }
        $(this).addClass('checked');
      })
      $(".weui-rater a").mouseout(function () {
        var thisL = $(this).index();
        for (var i = thisL; i < 5; i++) {
          $(".weui-rater a").eq(i).removeClass('checked');
        }
      })
      $(".weui-rater").mouseout(function () {

        for (var i = 0; i < num; i++) {
          $(".weui-rater a").eq(i).addClass('checked');
        }
      })
      $(".weui-rater a").click(function () {
        var thisL = $(this).index();
        $("#fen").html(arr[thisL]);
        $(this).addClass('checked');
        num = thisL + 1;
        console.log(num);
      })
      //评分js完
      //选择js
      $(".pjtwo1 span").click(function () {
        $(this).toggleClass("active");
      })
    });
  </script>

</html>